<template>
  <div>
    <!-- <img src="/data:/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAAFeAQAAAADlUEq3AAACQUlEQVR42u2bPW7DMAyFGXTImCP4KD6aczQfRUfw6CEwS5GiLDkJ0MU0CjxNqvUpC0Hq8afEf18vAgwYMOCz4ZlsTcwL/WxUv/BzlC+2BsCx8KAGEjhRhvN68OsmX+ZhuevhDDgaFjPZkfzVWNDgl20AXwXLUbm15i/iTYCvhumxeohTb9IN4GvgEuuyN1msy0f5OvPXwAj4XLiLbAf/+iohAJ8K1yW3dm+Sl6g8SZ/FNuBTYTeTSDVRaHk3pl2qubQGHAprLpMNRyYG9PrdbrWmBBwJSy5jwox0k2+1YiAfjQw4FtZNyWXElHq0ekHATNk9QIBj4CzVXKG1juaKGnA4bEfmX+Q1Gc1ukuqEzoKAQ2D5UrP+nNRM7fW73WLAsTCbN4kTUX131kah9VINcAQ8ixNZSdnr/CKkV32JNNbd+vQfcAScj1ShjclUgRZnyBTaYlWaxgcBR8Bz9SayoLc3X1SqdfoZcBDsPRd2C7o8yEXmY6wDHAI33cmaadbS2Zt+BhwCFw1Qqpeby+bNKmartfgBR8OLZf3UVvW1PsbJrzPgaNgyFxdmeuSd/UP1EnAUXEqUVDJNVwWa5mj04+61Anw+3HfELLKpf+2/0zYFAEfA3eReP2VBwwexDTgCrlMWe0fMKv9Pemu+AI6CmyEx3qgmmPuw66GhDzgStlqlvUTaGkua1HSDx4BjYS/OeI9scmk9fbAg4HPhOg3+qEGvlGISvc3JAA6BqSmL2SrzSHuVZgQcC+NfqAADBvwP4V8pAg9R+fW3OQAAAABJRU5ErkJggg==" alt=""> -->
    <ul v-for="(item,index) in crNo" :key="index">
      <li>
        <div class="contain">
          <img
            class="twocode"
            v-if="twocode"
            :src="'/'+twocode[index]"
            alt
            @tap="previewImage(index)"
          />
          <div class="containdetail">
            <span>编号：{{item}}</span>
            <img
              class="yuantu"
              v-if="imageurl"
              :src="baseurl+imageurl[index]"
              @tap="previewImage(index)"
            />
          </div>
          <button class="btn" @click="download(twocode[index],index)">下载二维码</button>
        </div>
      </li>
    </ul>
    <!-- <ul>
      <li>
        <div class="contain">
          <img class="twocode" v-if="twoimg" :src="twoimg" alt @tap="previewImage" />
          <div class="containdetail">
            <span>编号：{{no}}</span>
            <img class="yuantu" v-if="img" :src="img" />
          </div>
          <button class="btn">下载二维码</button>
        </div>
      </li>
    </ul>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseurl: "http://zwyzy.vipgz6.idcfengye.com",
      twocode: [],
      imageurl: [],
      // img: "../../static/images/user.png",

      // twoimg:"/data:/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAAFeAQAAAADlUEq3AAACQUlEQVR42u2bPW7DMAyFGXTImCP4KD6aczQfRUfw6CEwS5GiLDkJ0MU0CjxNqvUpC0Hq8afEf18vAgwYMOCz4ZlsTcwL/WxUv/BzlC+2BsCx8KAGEjhRhvN68OsmX+ZhuevhDDgaFjPZkfzVWNDgl20AXwXLUbm15i/iTYCvhumxeohTb9IN4GvgEuuyN1msy0f5OvPXwAj4XLiLbAf/+iohAJ8K1yW3dm+Sl6g8SZ/FNuBTYTeTSDVRaHk3pl2qubQGHAprLpMNRyYG9PrdbrWmBBwJSy5jwox0k2+1YiAfjQw4FtZNyWXElHq0ekHATNk9QIBj4CzVXKG1juaKGnA4bEfmX+Q1Gc1ukuqEzoKAQ2D5UrP+nNRM7fW73WLAsTCbN4kTUX131kah9VINcAQ8ixNZSdnr/CKkV32JNNbd+vQfcAScj1ShjclUgRZnyBTaYlWaxgcBR8Bz9SayoLc3X1SqdfoZcBDsPRd2C7o8yEXmY6wDHAI33cmaadbS2Zt+BhwCFw1Qqpeby+bNKmartfgBR8OLZf3UVvW1PsbJrzPgaNgyFxdmeuSd/UP1EnAUXEqUVDJNVwWa5mj04+61Anw+3HfELLKpf+2/0zYFAEfA3eReP2VBwwexDTgCrlMWe0fMKv9Pemu+AI6CmyEx3qgmmPuw66GhDzgStlqlvUTaGkua1HSDx4BjYS/OeI9scmk9fbAg4HPhOg3+qEGvlGISvc3JAA6BqSmL2SrzSHuVZgQcC+NfqAADBvwP4V8pAg9R+fW3OQAAAABJRU5ErkJggg==",
      crNo: []
    };
  },
  methods: {
    gettwocode() {
      this.twocode = wx.getStorageSync("twocode");
      this.imageurl = wx.getStorageSync("imgurl");
      this.crNo = wx.getStorageSync("crNo");
      console.log(this.twocode);
      console.log(this.imageurl);
    },
    previewImage(e) {
      console.log(e);
      // var cur = e.target
      wx.previewImage({
        urls: [this.twocode]
      });
    },
    // 下载图片
    download(url, index) {
      console.log(url);

      wx.getFileSystemManager().writeFile({
        filePath: wx.env.USER_DATA_PATH + "/" + index + ".png", //创建一个临时文件名
        data: url.slice(22), //写入的文本或二进制数据
        encoding: "base64", //写入当前文件的字符编码
        success: res => {
          wx.saveImageToPhotosAlbum({
            filePath: wx.env.USER_DATA_PATH + "/" + index + ".png",
            success: function(res) {
              wx.showToast({
                title: "保存成功"
              });
            },
            fail: function(err) {
              console.log(err);
            }
          });
        },
        fail: err => {
          console.log(err);
        }
      });
      // 1.wx.downloadFile 将远程文件下载到小程序内存中
      // 2 wx.saveImageToPhotosAlbum
      // console.log(url);
      // wx.downloadFile({
      //   url:this.baseurl+url,
      //   success(res){
      //     console.log(res);

      //   }
      // })
    }
  },
  // 页面下拉生命周期事件
  onPullDownRefresh() {
    // 1 重置数组
    this.twocode = [];
    this.imageurl = [];

    this.crNo = [];
    //  发送请求
    this.gettwocode();
    // 关闭下拉等待效果
    wx.stopPullDownRefresh();
  },
  beforeMount() {
    this.gettwocode();
  }
};
</script>

<style>
.contain {
  margin-left: 5rpx;
  width: 100%;
  position: relative;
  display: flex;
  border-bottom: 1rpx solid #eeeeee;
}
.containdetail {
  margin-top: 5rpx;
  margin-left: 5rpx;
  margin-bottom: 5rpx;
  display: flex;
  flex-direction: column;
}
.twocode {
  width: 200rpx;
  height: 200rpx;
}
.yuantu {
  width: 150rpx;
  height: 150rpx;
}
.btn {
  background-color: #e1397d;
  color: #fff;
  position: absolute;
  line-height: 80rpx;
  bottom: 20rpx;
  right: 10rpx;
  height: 80rpx;
}
</style>